<script setup>
const users = $ref([
  {userName:'张三1',age:22,password:'123456'},
  {userName:'张三2',age:22,password:'123456'},
  {userName:'张三3',age:22,password:'123456'},
  {userName:'张三4',age:22,password:'123456'},
  {userName:'张三5',age:22,password:'123456'},
  {userName:'张三6',age:22,password:'123456'}
])

function addUser(){
  //this.users.push({userName:'张三'+(this.users.length+1),age:22,password:'123456'}) //在数组头部添加一条数据
  users.unshift({userName:'张三'+(users.length+1),age:22,password:'123456'}) //在数组尾部添加一条数据
}

function del(e){
  users.splice(e,1) //splice:代表删除N条数据
}
//一个页面里面实际上没那么多业务的 放在一起都是OK的
</script>

<template>
  <h4>v-for循环 状态管理案例</h4>
  <h1> key:一般都是唯一值 一般都是需要加上key </h1>
  <span v-for="(user,index) in users" :key="user.userName">
        <input type="checkbox">{{user.userName}},{{index}},<button @click="del(index)" >delete</button><br/>
    </span>
  <br/>
  <button @click="addUser">新增user</button>

</template>

<style>

</style>
